<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>传动网-我的收藏</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="topic-main">
        <div class="news-detail">
            <div class="nav-top">
                <div class="head-label">
                    <a class="goback" href="javascript:history.go(-1);"><img class="left-arrow" src="image/left.png" alt=""></a>
                    <img src="image/logo-1.png" alt="">
                </div>
                <span>我的收藏</span>
                <div class="nav-img-right">
                    <a class="user-home-img" href=""><img src="image/user.png" alt=""></a>
                    <a class="menus" href="javascript:void;"><img id="menu-arrow"src="image/menu.png" alt=""></a>
                    <img id="down-arrow" src="image/down.png" alt="">
                </div>
            </div>
            <!-- 顶部menu导航菜单 -->
            <div class="nav-menu">
                <ul>
                    <li><a href="">关注</a></li>
                    <li><a href="">新闻</a></li>
                    <li><a href="">资讯</a></li>
                    <li><a href="">产品</a></li>
                    <li><a href="">技术</a></li>
                    <li><a href="">新闻</a></li>
                    <li><a href="">资讯</a></li>
                    <li><a href="">产品</a></li>
                    <li><a href="">技术贴</a></li>
                </ul>
            </div>
        </div>
        <div class="topic-con">
            <ul class="con-ul">
                <li>
                    <div class="user-infos">
                        <img src="image/user-img.jpg" alt="">
                        <p class="info-detail">
                            <span>前面的风景</span>
                            <span>南大奥托科技江苏股份有限公司</span>
                        </p>
                        <span class="concern">关注</span>
                        <span class="chosed">已关注</span>
                    </div>
                    <p class="topic-intro">2019年3月12日，为期3天的广州国际工业自动
                        化技术及装备展览会(SIAF),于广州中国逬出口 
                        商品交易会展馆圆满落幕。展会通过电...<a href="">全文</a></p>
                    <div class="topic-img">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                    </div>
                    <div class="oper-art">
                        <p><a href=""><img src="image/do-zan.png" alt=""><span>235</span></a></p>
                        <p><a href=""><img src="image/do-com.png" alt=""><span>641</span></a></p>
                        <p><a href=""><img src="image/do-share.png" alt=""><span>445</span></a></p>
                    </div>
                </li>
                <li>
                    <div class="user-infos">
                        <img src="image/user-img.jpg" alt="">
                        <p class="info-detail">
                            <span>前面的风景</span>
                            <span>南大奥托科技江苏股份有限公司</span>
                        </p>
                        <span class="concern">关注</span>
                        <span class="chosed">已关注</span>
                    </div>
                    <p class="topic-intro">2019年3月12日，为期3天的广州国际工业自动化技术及装备展览会(SIAF),于广州中国逬出口商品交易会展馆圆满落幕。展会通过电...<a href="">全文</a></p>
                    <div class="topic-img">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                        <img src="image/111.jpg" alt="">
                    </div>
                    <div class="oper-art">
                        <p><a href=""><img src="image/do-zan.png" alt=""><span>235</span></a></p>
                        <p><a href=""><img src="image/do-com.png" alt=""><span>641</span></a></p>
                        <p><a href=""><img src="image/do-share.png" alt=""><span>445</span></a></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="http://img.chuandong.com/common/script/jquery.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script>
        $(function () {
            $('.concern').hide()
            $('.con-ul li').hover(function () {
                var index = $(this).index()
                console.log('index',index)
                $('.con-ul li').eq(index).find('.concern').click(function () {
                   $('.con-ul li').eq(index).find('.chosed').show()
                   $('.con-ul li').eq(index).find('.concern').hide()
                }) 
                $('.con-ul li').eq(index).find('.chosed').click(function () {
                   $('.con-ul li').eq(index).find('.concern').show()
                   $('.con-ul li').eq(index).find('.chosed').hide()
                }) 
            },function () {

            })
        })
    </script>
</body>
</html>